<template>
	<div class="ds-wrapper ds-api">
		<div class="api-method-wrapper">
			<p class="title">请求方式</p>
			<div class="datav-new-select-wp">
				<el-select v-model="apiDataConfig.config.apiMethod" size="small" class="datav-new-select" popper-class="datav-new-select-option">
					<el-option v-for="amd in apiMethods" :key="amd" :label="amd" :value="amd" />
				</el-select>
			</div>
		</div>

		<!-- <p class="url-info">
			<label class="prefix-label textarea-label">URL：</label>
			<a target="_blank" rel="noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" class="api-help"
				>重要：跨域问题解决方案</a
			>
		</p> -->
		<!-- <p class="url-info-text">将回调参数配置到url中, 例: http://api.test?value=:value</p> -->
		<br />
		<div class="api-method-wrapper">
			<p class="title">请求数据接口</p>
			<div class="datav-new-select-wp">
				<!-- <el-select v-model="choolApi" size="small" @change="apiChange" class="datav-new-select" popper-class="datav-new-select-option">
					<el-option v-for="item in apiData" :key="item" :label="item" :value="item" />
				</el-select> -->
				<el-button type="primary" @click="choolApiList">选择数据</el-button>
			</div>
		</div>

		<br />
		<g-monaco-editor read-only language="plaintext" line-numbers="off" :height="120" :code="apiDataConfig.config.api" @blur="updateData" />
		<div class="post-request-data">
			<p class="url-info-text">Headers (Optional)</p>
			<g-monaco-editor language="json" :height="120" :auto-format="true" :code="apiDataConfig.config.apiHeaders" @blur="updateApiHeaders" />
		</div>
		<div v-if="apiDataConfig.config.apiMethod === apiMethods.POST" class="post-request-data">
			<p class="url-info-text">POST 请求参数</p>
			<g-monaco-editor language="json" :height="120" :auto-format="true" :code="apiDataConfig.config.apiBody" @blur="updateApiBody" />
		</div>
		<!--    <el-checkbox v-model="apiDataConfig.config.local" class="ds-checkbox">-->
		<!--      服务器代理请求 (因跨域无法访问时可勾选)-->
		<!--    </el-checkbox>-->
		<el-checkbox v-model="apiDataConfig.config.cookie" class="ds-checkbox"> 需要 cookie (不选择代理并且需要获取cookie时使用) </el-checkbox>
		<el-dialog v-model="apiVisible" title="选择接口" width="70%">
			<el-table ref="taskTableRef" :data="apiData" tooltip-effect="dark" style="width: 100%; height: 300px" @select="selectClick">
				<el-table-column type="selection" width="55"> </el-table-column>
				<el-table-column prop="routeName" label="接口名"> </el-table-column>
				<el-table-column prop="url" label="接口地址"> </el-table-column>
				<el-table-column prop="routeId" label="routeId"> </el-table-column>
				<el-table-column prop="routeMethod" label="调用方式"> </el-table-column>
				<el-table-column prop="routeVersion" label="路由版本"> </el-table-column>
				<el-table-column prop="remark" label="接口信息"> </el-table-column>
			</el-table>
			<el-pagination
				class="mt10"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="proQueryParams.pageNum"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="proQueryParams.pageSize"
				layout="prev, pager, next,sizes"
				:total="total"
			></el-pagination>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="apiVisible = false">取消</el-button>
					<el-button type="primary" @click="handleApi">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { defineComponent, ComputedRef, inject, ref } from "vue";
import { ApiDataConfig, ApiRequestMethod } from "@/datav/types/data-source";
import { getApiList, getEchars } from "@/api/modules/screen";
import { DatavComponent } from "@/datav/types/datav-component";
// import { useEditorStore } from "@/store/editor";
// getEchars
export default defineComponent({
	name: "DsApiEditor",
	setup() {
		// const editorStore = useEditorStore();
		const com = inject("com") as ComputedRef<DatavComponent>;
		const apiDataConfig = inject("apiDataConfig") as ComputedRef<ApiDataConfig>;
		const apiMethods = ApiRequestMethod;
		console.log("api======", apiDataConfig, com);
		// const variables = Object.keys(EditorModule.variables.publishersView)
		const apiData = ref([]);
		const total = ref(0);
		const proQueryParams = ref({
			pageNum: 1,
			pageSize: 10
		});
		const handleSizeChange = (size: number) => {
			proQueryParams.value.pageSize = size;
			apiList();
		};
		const handleCurrentChange = (page: number) => {
			proQueryParams.value.pageNum = page;
			apiList();
		};
		const apiList = async () => {
			const res = await getApiList(proQueryParams.value);
			apiData.value = res.data.routes.rows;
			total.value = res.data.routes.total;
			console.log("apiData===========", apiData.value, total.value);
		};
		const updateData = (data: any) => {
			apiDataConfig.value.config.api = data.value;
		};

		const updateApiHeaders = (data: any) => {
			apiDataConfig.value.config.apiHeaders = data.value;
		};

		const updateApiBody = (data: any) => {
			apiDataConfig.value.config.apiBody = data.value;
		};
		apiList();
		const choolApi = ref("");
		// api选择
		const apiChange = () => {
			getEchars({ routePath: choolApi.value, echarsType: com.value.name })
				.then(res => {
					console.log("res====", res);
					apiDataConfig.value.config.api = res.data.url;
					apiDataConfig.value.config.apiBody = res.data.requestData;
				})
				.catch(() => {
					apiDataConfig.value.config.api = "";
				});
		};
		const apiVisible = ref(false);
		const choolApiList = () => {
			apiVisible.value = true;
		};
		const taskTableRef = ref();
		const tableRow = ref();
		// 表格选择
		const selectClick = (selection: any, row: any) => {
			console.log(selection, row);
			if (selection.length > 1) {
				let del_row = selection.shift();
				taskTableRef.value.toggleRowSelection(del_row, false); // 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）；第二个参数为true时又变成了多选
			}
			tableRow.value = row;
		};
		const handleApi = () => {
			choolApi.value = tableRow.value.url;
			apiVisible.value = false;
			apiChange();
		};
		return {
			apiDataConfig,
			apiMethods,
			// variables,
			updateData,
			updateApiHeaders,
			updateApiBody,
			apiData,
			choolApi,
			apiChange,
			apiVisible,
			choolApiList,
			selectClick,
			taskTableRef,
			handleApi,
			total,
			apiList,
			proQueryParams,
			handleCurrentChange,
			handleSizeChange
		};
	}
});
</script>

<style lang="scss">
.ds-api {
	.api-method-wrapper {
		display: flex;
		align-items: center;
		.title {
			margin-right: 10px;
		}
	}
	.url-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;

		.api-help {
			color: var(--el-color-parimary);
		}
	}

	.url-info-text {
		margin-bottom: 10px;
	}

	.ds-checkbox {
		line-height: 18px;
		margin-bottom: 10px;
	}

	.datav-editor {
		margin-bottom: 10px;
	}
}
.el-table__header .el-checkbox {
	// 找到表头那一行，然后把里面的复选框隐藏掉
	display: none !important;
}
</style>
